<template>
  <div style="margin-top:2.5rem" class="jz_list">
    <!-- <p>
            <span>就诊类型</span>
            <span>全部
                <select>
                    <option value="">1</option>
                </select>
            </span>
        </p> -->
    <div class="jz_c">
      <div v-for="item in jzList" :key="item.id">
        <p>
          <span>
            <img :src="root+item.DOCTOR_PIC_URL" alt="">
          </span>
          <span>
            <p>{{item.DOCTOR_NAME}}({{item.ZYDJ}})</p>
            <p>{{item.SSKBMC}} {{item.PRE_TYPE}}({{item.SSYYMC}})</p>
          </span>
        </p>
        <p>候诊时间：{{item.PRETIME}}</p>
        <p>
          <span>预约挂号 费用：￥{{item.PRE_COST}}元</span>
          <span style="float:right;color:#26a2ff" @click="goJzdetail(item)">查看详情</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
const { config } = window;
export default {
  data() {
    return {
      jzList: [],
      DATA: {},
      ts: this.newStore(),
      tq: this.getData(),
      root: `${config.APIRoot}/doctor`,
    };
  },
  created() {
    this.getJzlist();
  },
  methods: {
    goJzdetail(item) {
      this.$router.push({
        path: '/wode/jzDetail',
        query: {
          DOCTOR_PIC_URL: item.DOCTOR_PIC_URL,
          DOCTOR_NAME: item.DOCTOR_NAME,
          PRE_TYPE: item.PRE_TYPE,
          PRETIME: item.PRETIME,
          SSKBMC: item.SSKBMC,
          ZYDJ: item.ZYDJ,
          PATIENT_NAME: item.PATIENT_NAME,
        },
      });
    },

    getJzlist() {
      this.tq.getJzlist(this.DATA).then((ts) => {
        this.jzList = ts.d.DATAOBJ.DATA;
      });
    },
    // getJzlist() {
    //   const res = JSON.stringify({
    //     OTRequest: {
    //       VERSION: '1.0',
    //       TN: 'F27.APP.05.08',
    //       CLIENTID: 'YLAPP',
    //       RYBID: 'PAT',
    //       TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
    //       DATA: {
    //         /* status: 'v', */
    //       },
    //     },
    //   });
    //   this.spost(this.ts, '/doctor/AppMainServlet.ap', {
    //     '': res,
    //   }).then((ts) => {
    //     console.log(ts.d);
    //     this.jzList = ts.d.DATAOBJ.DATA;
    //   });
    // },


    //         removeadr(id) {
    //         const res = JSON.stringify({
    //             OTRequest: {
    //             VERSION: '1.0',
    //             TN: 'F27.APP.02.28',
    //             CLIENTID: 'YLAPP',
    //             RYBID: '',
    //             TOKEN:`${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
    //             DATA: { uaid: id },
    //             },
    //         });
    //         this.spost(this.ts, '/doctor/AppMainServlet.ap', {
    //             '': res,
    //         }).then((ts) => {
    //             this.list.splice(0, 1);
    //         });
    // },
  },
};
</script>

<style lang="stylus" scoped>
.jz_list
    font-size 1rem
    p
        height 2rem
        line-height 2rem
        padding 0 1rem
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
.jz_c
    background #f1f1f1
    min-height 100vh
    padding 1rem 0
    div
        background #fff
        box-shadow: 1px 1px 4px 0px #ccc;
        margin-bottom 1rem
    img
        width 4rem
        width 4rem
        border-radius 50%
    p
        &:nth-child(1)
            height 5rem
            line-height 5rem
            border-bottom 1px solid #ccc
            span
                display inline-block
                float left
                &:first-child
                    text-align center
                    background #ccc
                    border-radius 50%
                    height 4rem
                    width 4rem
                    line-height 4rem
                    margin-top 0.5rem
                &:last-child
                    p
                        height 1rem
                        line-height 1rem
                        border none
                        margin 1rem 0
                        &:last-child
                            font-size 0.8rem
                            color #aaa

        &:nth-child(2)
            box-shadow none
            color #ccc
            font-size 0.9rem
        &:nth-child(3)
            font-size 0.9rem
</style>

